<template>
  <div>
    <el-table :data="auths" style="width: 100%; height: 100%; font-size: 10px">
      <el-table-column label="绑定账号平台" align="center" prop="source">
        <template slot-scope="scope">
          <img v-if="scope.row.source==='gitee'" :src="require('@/assets/images/gitee.png')"
               style="width: 15%;"/>
          <img v-if="scope.row.source==='qq'" :src="require('@/assets/images/QQ.png')"
               style="width: 15%;"/>
          <img v-if="scope.row.source==='wechat_open'" :src="require('@/assets/images/微信.png')"
               style="width: 15%;"/>
          <img v-if="scope.row.source==='github'" :src="require('@/assets/images/GitHub.png')"
               style="width: 15%;"/>
        </template>
      </el-table-column>
      <el-table-column label="头像" align="center" prop="avatar">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" style="width: 15%"/>
        </template>
      </el-table-column>
      <el-table-column
        label="第三方账号"
        align="center"
        prop="userName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="绑定时间"
        align="center"
        prop="createTime"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="unlockAuth(scope.$index, scope.row)"
          >解绑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div id="git-user-binding">
      <h3><b>第三方帐号绑定</b></h3>
      <h4 class="provider-desc">使用以下任一方式都可以登录到您的帐号，避免由于某个帐号失效导致无法登录
      </h4>
      <div class="oauth-login" style="display:flex;justify-content: space-evenly">
        <img @click="authUrl('gitee');" style="width: 3%" :src="require('@/assets/images/gitee.png')">
        <img @click="authUrl('qq');" style="width: 3%" :src="require('@/assets/images/QQ.png')">
        <img @click="authUrl('wechat_open');" style="width: 3%" :src="require('@/assets/images/微信.png')">
        <img @click="authUrl('github');" style="width: 3%" :src="require('@/assets/images/GitHub.png')">
      </div>
    </div>
  </div>
</template>

<script>
import {authUnlock, authBinding} from "@/api/system/auth";

export default {
  props: {
    auths: {
      type: Array,
    },
  },
  data() {
    return {};
  },
  methods: {
    unlockAuth(index, row) {
      var _this = this;
      this.$modal
        .confirm('您确定要解除"' + row.source + '"的账号绑定吗？')
        .then(function () {
          return authUnlock(row.authId);
        })
        .then(() => {
          _this.auths.splice(index, 1);
          this.$modal.msgSuccess("解绑成功");
        })
        .catch(() => {
        });
    },
    authUrl(source) {
      authBinding(source).then(res => {
        top.location.href = res.msg;
      });
    }
  },
};
</script>

<style type="text/css">
.user-bind .third-app {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 80px;
  float: left;
}

.user-bind {
  font-size: 1rem;
  text-align: start;
  height: 50px;
  margin-top: 10px;
}

.git-other-login-icon > img {
  height: 32px;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: #005980;
}

.provider-desc {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans",
  "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei",
  "WenQuanYi Zen Hei", "ST Heiti", SimHei, SimSun, "WenQuanYi Zen Hei Sharp",
  sans-serif;
  font-size: 1.071rem;
}

td > img {
  height: 20px;
  width: 20px;
  display: inline-block;
  border-radius: 50%;
  margin-right: 5px;
}
</style>
